<template>
  <div id="app">
    <el-container>
      <el-header>
        <span>
          <!--  <img :src="logo" width="50" />-->
          <img :src="require('./assets/logo.png')" width="50" />
          <b>后台管理系统</b>
        </span>

        <span>
          <i>张三</i>
        </span>
      </el-header>
      <el-container class="container">
        <el-aside width="200px">
          <ul>
            <li>
              <!-- exact-active-class="red"-->
              <router-link to="/">Home</router-link>
            </li>
            <li>
              <!-- exact-active-class="red"-->
              <router-link :to="{ name: 'articles' }">文章管理</router-link>
            </li>
            <li>
              <!-- exact-active-class="red"-->
              <router-link to="/about">About</router-link>
            </li>
          </ul>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import logo from "./assets/logo.png";

export default {
  data() {
    return {
      logo,
    };
  },
};
</script>

<style lang="scss">
//@import "~normalize.css/normalize.css";

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;

  span {
    display: flex;
    align-items: center;
  }
}

.container {
  height: calc(100vh - 60px);
}

.el-aside {
  background-color: #d3dce6;
  color: #333;

  ul {
    list-style: none;

    li {
      height: 40px;
      line-height: 40px;

      a {
        color: #2c3e50;
        text-decoration: none;

        &:hover,
        &.router-link-exact-active {
          color: #42b983;
          font-weight: bold;
        }

        &.red {
          color: red;
        }
      }
    }
  }
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
</style>
